<template>
	<view class="after-services">
		<NavBar title="申请售后" :isBack="true"></NavBar>
		<view class="content">
			<view class="top-area">
				<view class="goods-msg">
					<image class="goods-img" :src="detail.shops.cover"></image>
					<view class="specific-msg">
						<view class="title">
							<view>{{ detail.shops.title }}</view>
						</view>
						<view class="order-num">{{ detail.shops_styles.name }}</view>
						<view class="control">
							<view class="price">¥ {{ detail.price }}</view>
							<view class="num">
								x 1
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="middle-area">
				<view class="configuration">
					<view class="row">
						<view class="title">退款原因</view>
						<view @click="isRefund = true">
							<text>{{ form.reason || '请选择' }}</text>
							<image src="@/static/goodDetail/back.png"></image>
						</view>
					</view>
					<view class="row">
						<view class="title">商品件数</view>
						<NumCount v-model="form.num"></NumCount>
					</view>
					<view class="comment">
						(最多可退1件)
					</view>
				</view>
			</view>
			<!-- s -->
			<view class="bottom-area">
				<view class="configuration">
					<view class="row">
						<view class="title">申请金额</view>
						<view class="edit">
							<text class='price'>¥ {{ totalPrice }}</text>
							<uni-icons type="compose" size="30"></uni-icons>
						</view>
					</view>
					<view class="comment">
						(最多可退¥ {{ detail.paymoney }},含运费¥ 0.00)
					</view>
					<view class="textarea">
						<view class="title">申请说明</view>
						<textarea v-model="form.explain" maxlength="150" type="text" placeholder="请填写申请说明,一边店铺更好的处理售后问题" />
					</view>
					<view class="upload">
						<view class="picload" v-for="(item, index) in imgUrlList" :key="index">
							<image :src="item" alt=""></image>
						</view>
						<view class="fileload" @click="handleUpload">
							<view class="">
								上传凭证
							</view>
							<view class="">
								（最多5张）
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- e -->
			<view class="footer-area">
				<view class="btn">
					<view class="payment" @click="handleSave">提交申请</view>
				</view>
			</view>
		</view>
		<refundDialog v-model="isRefund" @success="handleRefund"></refundDialog>
	</view>
</template>

<script setup>
import NumCount from "@/components/NumCount.vue";
import refundDialog from "./components/refundDialog.vue";
import { getOrderAfter, upload, saveOrderAfter } from '@/api/order'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, toRefs, computed } from 'vue'
import config from '@/request/config.js';
const state = reactive({
	imgUrlList: [],
	isRefund: false,
	form: {
		num: 1,
		explain: "",
		image: "",
		reason: ""
	},
	detail: {
		shops: {},
		shops_styles: {}
	}
})
//选择退款原因
function handleRefund (item) {
	state.form.reason = item.title
}
//获取详情
async function getOrderDetail (id) {
	const res = await getOrderAfter({ id })
	state.detail = res.data
}
//上传图片
function handleUpload () {
	uni.chooseImage({
		count: 5,
		success: (chooseImageRes) => {
			console.log("🚀 ~ handleUpload ~ chooseImageRes:", chooseImageRes)
			const tempFilePaths = chooseImageRes.tempFilePaths;
			const token = uni.getStorageSync("token")
			tempFilePaths.forEach(x => {
				if (state.imgUrlList.length < 5) {
					console.log("进来了")
					uni.uploadFile({
						url: config.baseUrl + 'users/uploads',
						filePath: x,
						name: 'image',
						fileType: 'image',
						header: {
							'token': token
						},
						success: (uploadFileRes) => {
							console.log("🚀 ~ handleUpload ~ uploadFileRes:", uploadFileRes)
							const res = JSON.parse(uploadFileRes.data)
							state.imgUrlList.push(res.data.data)
						}
					});
				}

			})
		},
		fail: (fail) => {
			console.log("🚀 ~ handleUpload ~ fail:", fail)

		},
	});


}
//删除图片
function handleCloseImg (index) {
	state.imgUrlList.splice(index, 1)
}
//总价
const totalPrice = computed(() => {
	return state.detail.price * state.form.num
})

//提交
function handleSave () {
	state.form.image = state.imgUrlList.join("")
	if (!state.form.reason) {
		uni.showToast({ title: "退款原因不能为空", icon: "none" })
		return
	}
	if (!state.form.explain) {
		uni.showToast({ title: "退款说明不能为空", icon: "none" })
		return
	}
	if (!state.form.image) {
		uni.showToast({ title: "图片凭证不能为空", icon: "none" })
		return
	}
	saveOrderAfter({ ...state.form, money: totalPrice.value, id: state.detail.id }).then(res => {
		if (res.code) {
			uni.showToast({ title: "操作成功" })
			uni.navigateBack()
		}
	})
}
onLoad((e) => {
	getOrderDetail(e.id)
})
const { form, detail, isRefund, imgUrlList } = toRefs(state)
</script>

<style lang="scss" scoped>
.after-services {
	.content {
		position: relative;
		top: -40rpx;
		padding: 36rpx;

		.top-area {
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			margin-bottom: 36rpx;
		}

		.top-area {
			.goods-msg {
				display: flex;
			}

			.goods-img {
				width: 155rpx;
				height: 155rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 24rpx;
			}

			.specific-msg {
				width: 440rpx;

				.title {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.order-num {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					margin: 8rpx 0rpx 40rpx;
				}

				.control {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #FF0000;
					}
				}
			}
		}

		.middle-area {
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			margin-bottom: 36rpx;

			.configuration {
				.row:first-child {
					padding-bottom: 24rpx;
					margin-bottom: 24rpx;
					border-bottom: 1px solid #F5F5F5;
				}

				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 14rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.comment {
					padding-top: 0;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
			}



		}


		.bottom-area {
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			margin-bottom: 36rpx;

			.configuration {
				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: 200rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

				}

				.comment {
					padding-top: 0;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}

				.textarea {
					margin-top: 45rpx;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.title {
						width: 200rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					textarea {
						font-size: 24rpx;
						color: #333333;
						width: 100%;
						height: 100rpx;
					}
				}

				.upload {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.picload {
						background-color: #F5F5F5;
						width: 150rpx;
						height: 150rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.fileload {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border: 1px solid #F5F5F5;
						width: 150rpx;
						height: 150rpx;
						color: #999;

					}
				}
			}
		}

		.footer-area {
			.btn {
				text-align: center;
				width: 648rpx;
				height: 66rpx;
				line-height: 66rpx;
				background: #58DBCF;
				border-radius: 500rpx 500rpx 500rpx 500rpx;
				font-weight: 800;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-top: 84rpx;
			}
		}

	}
}
</style>